<template>
	<custom-page title="我的订单" backgroundColor="#F9F9F9">
		<template #page>
			<view class="page-content">
				<top-tab-bar-news minWidth="20%" :tabs="tabDatas" :current="current" @changed="onTabItemChange($event)">
				</top-tab-bar-news>
				<common-list-view ref="orderList" class="list-view" :enableLoadMore="true" :enableRefresh="true"
					@listinit="onListInit($event)" :hasNoDataHolder="true" :noDataImage="asserts.ic_order_empty">
					<template #content='{datas}'>
						<view class="order-item" v-for="(item, index) in datas" @click="orderClick(item)">
							<view class="title-row">
								<view class="num">{{item.orderNo}}</view>
								<view class="status">{{item.orderStatusDesc}}</view>
							</view>
							<view class="divider"></view>
							<view class="store">{{item.pollName}}</view>
							<view class="content">服务开始时间：{{item.serviceStartTime}}</view>
							<view class="content">服务结束时间：{{item.serviceEndTime}}</view>
							<view class="content">下单用户：{{item.placeUserName}}</view>
							<view class="content">订单金额：<text class="money">￥{{item.totalPaymentStr}}</text></view>
							<view style="height: 32rpx;"></view>
							<view class="divider"></view>
							<view class="bottom-row">
								<view class="btn1" @click.stop="refuseOrderClick(item)" v-if="item.orderStatus==2">拒绝接单
								</view>
								<view class="btn2" @click.stop="receiveOrderClick(item)" v-if="item.orderStatus==2">确认接单
								</view>
								<view class="btn2" @click.stop="startServiceClick(item)" v-if="item.orderStatus==3">开始服务
								</view>
								<view class="btn2" @click.stop="endServiceClick(item)" v-if="item.orderStatus==4">结束服务
								</view>
								<view class="btn2" @click.stop="abnormalClick(item)"
									v-if="item.orderStatus==3 || item.orderStatus==4">异常上报</view>
								<view class="btn1" @click.stop="abnormalRecordClick(item)">上报记录</view>
							</view>
						</view>
					</template>
				</common-list-view>
			</view>
		</template>
		<template #popup>
			<uni-popup ref="refuseDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="请输入拒单理由" placeholder="请输入"
					@confirm="refuseInputConfirm"></uni-popup-dialog>
			</uni-popup>
			<assistant-receive-popup ref="receivePopup" @inputBack="inputBack"></assistant-receive-popup>
		</template>
	</custom-page>
</template>

<script>
	export default {
		data() {
			return {
				tabDatas: [{
						text: '待接单',
						value: '2'
					},
					{
						text: '待服务',
						value: '3'
					},
					{
						text: '服务中',
						value: '4'
					},
					{
						text: '服务完成',
						value: '5'
					},
					{
						text: '已完成',
						value: '6'
					},
					{
						text: '拒绝订单',
						value: '7'
					},
					{
						text: '已关闭',
						value: '10'
					}
				],
				current: 0,
				receiveOrderNo: '',
				refuseOrderNo: '',
			}
		},
		onLoad(val) {
			if (val && val.index) {
				let index = Number(val.index)
				if (index) {
					this.current = index
				}
			}
			
			//用户信息编辑
			uni.$on('refreshOrder', this.refreshList)
		},
		onUnload() {
			uni.$off('refreshOrder', this.refreshList)
		},
		methods: {
			//tab切换
			onTabItemChange: function(event) {
				this.current = event.value
				this.refreshList()
			},

			refreshList() {
				this.$refs.orderList.triggerLoadData({
					start: 1,
					showLoading: true
				})
			},

			onListInit(event) {
				event.target.loadPageData = ({
					start,
					pageSize,
					showLoading = false
				}) => {
					let params = {
						current: start,
						pageSize: pageSize,
						orderStatus: this.tabDatas[this.current].value,
					}
					return this.requestCenter.getAssistantOrderList(params)
						.then(res => {
							return Promise.resolve({
								curPage: start,
								pageCount: res.pages || 1,
								datas: res.records || []
							})
						})
				}
			},

			//订单点击
			orderClick(item) {
				uni.navigateTo({
					url: '/pages/assistant-order-detail/assistant-order-detail?id=' + item.id,
					events: {
						orderBack: (data) => {
							this.$refs.orderList.triggerLoadData({
								start: 1,
								showLoading: true
							})
						}
					}
				})
			},

			//拒绝接单
			refuseOrderClick(item) {
				this.refuseOrderNo = item.orderNo
				this.$refs.refuseDialog.open()
			},

			//拒绝接单确定
			refuseInputConfirm(val) {
				if(!val){
					uni.showToast({
						title: "请输入拒单理由"
					})
					return
				}
				let params = {
					orderNo: this.refuseOrderNo,
					presentationCondition: val
				}
				this.requestCenter.refuseOrder(params).then(res => {
					this.refreshList()
				})
			},

			//确认接单
			receiveOrderClick(item) {
				this.receiveOrderNo = item.orderNo
				this.$refs.receivePopup.show()
			},

			//接单输入
			inputBack(data){
				let params = {
					orderNo: this.receiveOrderNo,
					roomNumber: data.data
				}
				this.requestCenter.receiveOrder(params).then(res => {
					this.refreshList()
				})
			},

			//开始服务
			startServiceClick(item) {
				uni.navigateTo({
					url: '/pages/assistant-start-service/assistant-start-service?type=start&orderNo=' + item.orderNo
				})
				// uni.showModal({
				// 	title: '确定开始服务吗？',
				// 	success: (modal) => {
				// 		if (modal.confirm) {
				// 			let params = {
				// 				orderNo: item.orderNo,
				// 			}
				// 			this.requestCenter.startOrderService(params).then(res => {
				// 				this.refreshList()
				// 			})
				// 		}
				// 	}
				// })
			},

			//结束服务
			endServiceClick(item) {
				uni.navigateTo({
					url: '/pages/assistant-start-service/assistant-start-service?type=end&orderNo=' + item.orderNo
				})
				// uni.showModal({
				// 	title: '确定结束服务吗？',
				// 	success: (modal) => {
				// 		if (modal.confirm) {
				// 			let params = {
				// 				orderNo: item.orderNo,
				// 			}
				// 			this.requestCenter.endOrderService(params).then(res => {
				// 				this.refreshList()
				// 			})
				// 		}
				// 	}
				// })
			},

			//异常上报
			abnormalClick(item) {
				uni.navigateTo({
					url: `/pages/order-abnormal-report/order-abnormal-report?orderNo=${item.orderNo}&userType=2`
				})
			},
			
			//上报记录
			abnormalRecordClick(item){
				uni.navigateTo({
					url: `/pages/order-report-record/order-report-record?orderNo=${item.orderNo}`
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page-content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.list-view {
		flex: 1;
		overflow: hidden;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding: 0 32rpx;
		box-sizing: border-box;
		background-color: white;
		margin-top: 16rpx;

		.title-row {
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 88rpx;
			justify-content: space-between;
			font-size: 28rpx;

			.num {
				color: #585F70;
			}

			.status {
				color: #01CBFF;
			}
		}

		.divider {
			width: 100%;
			height: 1rpx;
			background-color: #F5F5F5;
		}

		.store {
			font-size: 32rpx;
			color: #021624;
			line-height: 44rpx;
			margin-top: 16rpx;
			font-weight: 500;
		}

		.content {
			font-size: 28rpx;
			color: #021624;
			line-height: 40rpx;
			margin-top: 8rpx;
		}

		.money {
			color: #ED3C3D;
		}

		.bottom-row {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-end;
			padding: 32rpx 0;
			box-sizing: border-box;

			.btn1,
			.btn2 {
				width: 176rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				border-radius: 32rpx;
				font-size: 28rpx;
				margin-left: 32rpx;
			}

			.btn1 {
				background: #FFFFFF;
				border: 1rpx solid #ABAFB7;
				color: #585F70;
			}

			.btn2 {
				background: #FFFFFF;
				border: 1rpx solid #01CBFF;
				color: #01CBFF;
			}
		}
	}
</style>
